<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="主页demo/js/jquery-3.6.0.min.js"></script>
		<script src="./js/layui/layui.js"></script>
		<link rel="stylesheet" href="./js/layui/css/layui.css" />
		<link rel="stylesheet"  href="css/base.css"/>
		<link rel="stylesheet" href="css/common.css" />
		<style>
			 html,body{
				 width: 100%;
			 }
			.main{
				width: 100%;
				height: 100vh;
				background: linear-gradient(to right,#D0D0D0, #E2E2E2);				
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.playdiv{
				width: 800px;
				height: 20px;
				padding: 5px;
				border-radius: 25px;
				background-color: white;
				position: relative;
			}
			.playdivitem{
				width: 100%;
				height: 100%;
				background-color: #00F7DE;
				border-radius: 25px;
			}
			.playdivitem2{
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: white;
				position: absolute;
				padding: 5px;
				top: -25%;
				left: 770px;
			}
			
			.playdivitem2-item{
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #00F7DE;
			}
			.playdivitem2:hover{
				cursor: pointer;
			}
			.control{
				margin-top: 30px;
			}
			.control>div{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				
			}
			.control>div:hover{
				cursor: pointer;
			}
			.control>div>img{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			.stop{
				display: none;
			}
		</style>
	</head>
	<body>
		
		<div class="main">
			
			<div class="playdiv">
				<div class="playdivitem"> 
					
				</div>
				<div class="playdivitem2">
					<div class="playdivitem2-item">
						
					</div>
				</div>
			</div>
			
			<div class="control">
				<div class="play">
					<img src="img/src=http___b播放.jpg" />
				</div>
				<div class="stop">
					<img src="img/暂停.jpg" />
				</div>
			</div>
			
		</div>
		
		
		<script>
			$(function(){
				let timetotal=20;
				let currenttime=1;
				let itemwidth=0;
				var timer=null;
				
				$(".control div").click(function(){
					$(this).toggle();
					$(this).siblings().toggle()
				})
				$(".play").click(function(){
					timer=setInterval(()=>{
							if(currenttime>=timetotal){
								clearInterval(timer);
								currenttime=0;
							}
						itemwidth=currenttime/timetotal*100;
						
							$(".playdivitem").css({
								"width":itemwidth+"%"
							})
							$(".playdivitem2").css({
								"left":currenttime/timetotal*770+"px"
							})
							currenttime+=1;
							console.log(currenttime)
						},1000);
				})
				$(".stop").click(function(){
					clearInterval(timer);
				})
			
			//offset().left拿到元素距离页面左侧的距离
			let playdivX=$(".playdiv").offset().left;
			//offset().top拿到元素距离页面顶部的距离
			let playdivY=$(".playdiv").offset().top;
				document.onmousedown = function(e){
						let mouseX=e.pageX;
						let mouseY=e.pageY;
						//offset().left拿到元素距离页面左侧的距离
						let item2X=$(".playdivitem2").offset().left;
						//offset().top拿到元素距离页面顶部的距离
						let item2Y=$(".playdivitem2").offset().top;
						let item2width=$(".playdivitem2").width();
						let item2height=$(".playdivitem2").height();
						if(  item2X+item2width >mouseX && mouseX>item2X && item2Y+item2height >mouseY && mouseY>item2Y){
							 let mouseXitem2=mouseX-item2X;
							 
							 document.onmousemove=function(e){
									mouseX=e.pageX;
									mouseY=e.pageY;
									console.log("palydivX:",playdivX)
									console.log("palydivY:",playdivY)
									console.log("mouseX:",mouseX)
									console.log("mousey:",mouseY)
									
									if(  playdivX>mouseX || mouseX>playdivX+800 ){
										
									}
									else{
										console.log("mouseXitem2:",mouseXitem2)
										
										$(".playdivitem2").css({
											"left":mouseX-mouseXitem2-playdivX+"px"
										})
									}
								 
							 }
							 
							 document.onmouseup=function(event){		
										//offset().left拿到元素距离页面左侧的距离
										item2X=$(".playdivitem2").offset().left;
										itemwidth=item2X-playdivX+10;
									
										
										
							 			 //将监听鼠标移动的事件和鼠标恢复事件移除
							 			document.onmousemove= document.onmouseup=null
										
							 }
							 
							
						}
					
				}
			
			})
		</script>
		
	</body>
</html>
